<template>
    <div class="todoapp">
        <h1>待办事项清单</h1>
        <section class="wrap">
            <header class="header">
                <input autofocus="true" v-model="newTodo" @keyup.enter="addItem" placeholder="输入待办事项后回车新增"/>
            </header>
            <section class="main"  v-show="todoList.length>0">
                <input type="checkbox" @change="toggleSelectAll" class="chk-all"/>
                <ul class="todo-list">
                    <li v-for="(item,index) in showDatas" :class="{'checked':item.done,'editing':editingItem === item}">
                        <div class="item">
                            <input type="checkbox" @change="saveToStorage" class="chk-toggle" v-model="item.done"/>
                            <label @dblclick="editItem(item)">{{ item.value }}</label>
                            <span class="time">{{item.addTime|curDate}}</span>
                            <button class="btn-remove" @click.prevent="delItem(item)"></button>
                        </div>
                        <input type="text"  autofocus="true" v-model="item.value" @keyup.enter="saveItem(item)" class="edit">
                    </li>
                </ul>
            </section>
            <footer  v-show="todoList.length>0">
                <span class="uncomplete-count">{{unCompleteList.length}}个待处理</span>
                <div class="filters">
                    <span :class="mode==='all'?'active':''" @click="changeMode('all')">全部</span>
                    <span :class="mode==='active'?'active':''" @click="changeMode('active')">待办</span>
                    <span :class="mode==='completed'?'active':''" @click="changeMode('completed')">已完成</span>
                </div>
                <span class="clearCompleted" v-if="todoList.length-unCompleteList.length>0" @click="clearCompleted">清除已完成事项</span>
            </footer>
        </section>


    </div>
</template>

<script>
    import moment from 'moment'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')
    const STORE_NAME = "TODOLIST"
    export default {
        name: 'app',
        data () {
            return {
                mode: 'all',//all|active|completed
                editingItem:null,//当前编辑
                newTodo: '',//跟输入框双向绑定事项
                todoList: []//存储事项列表
            }
        },
        created (){
            //localstorage中存在数据的话则加载
            if (localStorage.getItem(STORE_NAME) != null) {
                this.todoList = JSON.parse(localStorage.getItem(STORE_NAME))
            }
        },
        computed: {
            showDatas(){
                //根据显示模式筛选当前视图下显示的数据
                if (this.mode === 'all') {//全部
                    return this.todoList
                } else if (this.mode === 'active') {//待办事项
                    return this.unCompleteList;
                } else {//已完成事项
                    return this.todoList.filter(function (todoItem) {
                        return todoItem.done
                    })

                }
            },
            unCompleteList(){
                return this.todoList.filter(function (todoItem) {
                    return !todoItem.done
                })

            }
        },
        filters: {
            //使用moment定义日期显示效果
            curDate(val){
                return moment(val).fromNow();
            }
        },
        methods: {
            //添加待办事项
            addItem() {
                this.todoList.unshift({
                    value: this.newTodo,
                    done: false,
                    addTime: Date.now()
                });
                this.saveToStorage();
                this.newTodo = ''
            },
            //删除待办事项
            delItem (todo) {
                this.todoList = this.todoList.filter((x) => x !== todo)
                this.saveToStorage();
            },
            //双击设置为编辑状态
            editItem(item){
                this.editingItem = item;
            },
            //单击回车后保存编辑的内容
            saveItem(){
                this.editingItem = null;
                this.saveToStorage();
            },
            //保存待办事项到本地存储
            saveToStorage(){
                localStorage.setItem(STORE_NAME, JSON.stringify(this.todoList));
            },
            //切换显示模式
            changeMode(mode){
                this.mode = mode;
            },
            //全选按钮操作
            toggleSelectAll(){
                if (this.unCompleteList.length > 0) {
                    //console.log("执行全选");
                    this.todoList.forEach((item) => item.done = true);
                } else {
                    //console.log("执行撤销全选");
                    this.todoList.forEach((item) => item.done = false);
                }
                this.saveToStorage();
            },
            //清除已完成事项
            clearCompleted(){
                this.todoList = this.unCompleteList;
                this.saveToStorage();
            }
        }
    }
</script>
<style>
    body {
        background-color: #eee;
        font-family: "microsoft yahei";
        font-size: 16px;
    }

    * {
        box-sizing: border-box;
    }

    .wrap {
        width: 550px;
        margin: 20px auto;
        background: #fff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    }

    .todoapp h1 {
        margin-top:35px;
        color: rgba(175, 47, 47, 0.15);
        font-size: 42px;
        text-align: center;
    }

    .header {
    }

    .header input {
        padding:16px 16px 16px 60px;
        width: 100%;
        font-size: 18px;
        border: none;
        outline: none;
    }

    .main {
        border-top: solid 1px #e6e6e6;
        position:relative;
    }

    button, input[type="checkbox"] {
        outline: none;
        border: none;
    }

    .chk-all {
        position: absolute;
        top: -45px;
        left: 2px;
        width: 40px;
        height: 34px;
        transform: rotate(90deg);
        text-align: center;
        -webkit-appearance: none;
        appearance: none;
        border:none;
    }

    .chk-all:before {
        content:'\276F';
        font-size: 22px;
        color: #e6e6e6;
    }

    .chk-all:checked:before {
        color: #737373;
    }

    .btn-remove:after {
        content: '×'
    }

    .todo-list {
        padding-left: 0;
        margin:0;
    }

    .todo-list li {
        position: relative;
        line-height: 42px;
        font-size: 18px;
        border-bottom: 1px solid #ededed;
        padding-left: 0;
        list-style: none;
    }
    .todo-list li.checked label{
        color: #d9d9d9;
        text-decoration: line-through;
    }
    .todo-list li input.edit{
        display: none;
        width:100%;
        padding:6px;
        font-style: 18px;
        border:1px solid #999;
        -webkit-box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    }
    .todo-list li.editing div.item{
        display: none;;
    }
    .todo-list li.editing input.edit{
        display: block;
    }
    .todo-list li input.chk-toggle{
        position: absolute;
        left:0;
        top:6px;
        width:40px;
        height:40px;
        -webkit-appearance: none;
        appearance: none;
        border:none;
    }
    .todo-list li input.chk-toggle:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
    }

    .todo-list li input.chk-toggle:checked:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
    }
    .todo-list li .btn-remove{
        position:absolute;
        right: 10px;
        top:8px;
        width:40px;height:40px;
        font-size: 30px;
        color:#cc9a9a;
        background: none;
        display: none;
        transition:color 0.2s ease-out;
    }
    .todo-list li label {
        white-space: pre-line;
        word-break: break-all;
        padding: 15px 90px 15px 15px;
        color:#6d7380;
        margin-left: 45px;
        display: block;
        line-height: 1.2;
        transition: color 0.4s;
    }
    .todo-list li span.time{
        position:absolute;
        right:15px;
        top:0;
        color:#7f7f7f;
    }

    .todo-list li.completed label {
        color: #d9d9d9;
        text-decoration: line-through;
    }
    .todo-list li:hover span.time{
        display: none;
    }
    .todo-list li:hover  .btn-remove{
        display: block;
    }
    .todo-list li .btn-remove:hover{
        color:#af5b5e;
    }
    footer{padding:10px;position:relative;}
    .uncomplete-count{position:absolute;}
    .filters {
        text-align: center;
    }

    .filters span {
        margin: 3px;
        border-radius: 3px;
        padding: 3px 7px;
        line-height: 26px;
        cursor: pointer;
        border: 1px solid transparent;
    }

    .filters span.active {
        border-color: rgba(175, 47, 47, 0.2)
    }
    .filters span:hover{border-color:rgba(175, 47, 47, 0.1)}
    .clearCompleted{
        position: absolute;
        right: 5px;
        top:10px;
        padding:2px 5px;
        border:solid 1px  rgba(175, 47, 47, 0.15);
        cursor: pointer;
        border-radius:3px;
    }
    .clearCompleted:hover{
        background: rgba(175, 47, 47, 0.15);
        color:rgba(175, 47, 47, 1);

    }

</style>
